<template>
  <div>
    <div v-for="(order, index) in items" :key="index" class="dispatch_ddan" :class="{dispatch_ddan1: order.selected}" @click="chooseItem(index)">
      <div class="dispatch_title">
        <h1>{{order.truckOrderCode||'--'}}&nbsp;&nbsp;&nbsp;{{order.seagoingShipOrderCode||'--'}}</h1>
        <p>
          <i>{{orderTypeStr(order.orderType)}}</i>
          <span v-if="order.isUrgent===1" class="ztai1">加急</span>
          <span v-if="order.belongCompany==='JIA_TE'">自主业务</span>
          <span v-if="order.belongCompany==='JIA_HUA'">佳华业务</span>
          <span v-if="(order.status===3||order.status===4) && order.dispatchList.length > 1" class="ztai2">抢单中</span>
        </p>
      </div>
      <div class="dispatch_adress">
        <span>港</span>
        <p>起运港：{{order.startPortName||'--'}} —— 目的港：{{order.endPortName||'--'}}</p>
      </div>
      <div class="dispatch_add">
        <ul>
          <li v-for="v in order.addressList" :key="v.addressId" :class="{isPort: v.addressType===1}">
            <h1>{{v.addressType===1?v.portName:`${v.province}${v.city}${v.area}${v.address}`}}</h1>
            <p>{{v.linkMan}}&nbsp;&nbsp;&nbsp; {{v.linkManPhone}}</p>
            <span>{{v.opeType===1?'装货':(v.opeType===2?'卸货':(v.opeType===3?'提箱':'--'))}}</span>
          </li>
        </ul>
      </div>
      <div class="dispath_detail">
        <ul>
          <li><p>货名：{{order.goodsName||'--'}}</p></li>
          <li><p>箱号：{{order.containerNo||'--'}}</p></li>
          <li>箱型箱量：{{order.containerType}}*{{order.containerNum||1}}</li>
          <li>封号：{{order.containerSealNo||'--'}}</li>
          <li style="width:100%">要求送达：{{order.requiredArriveTime||'--'}}</li>
          <li style="width:100%">
            海船公司：{{order.seagoingShipCompanyName||'--'}}
          </li>
        </ul>
      </div>
      <div v-if="order.status===3||order.status===4" class="dispath_driver">
        <ul v-if="order.dispatchList.length === 1">
          <li><p>车辆：{{order.dispatchList[0].tractorNumber}}{{order.dispatchList[0].trailerNumber&&order.dispatchList[0].isSelfOperation===0 ? `·${order.dispatchList[0].trailerNumber}` : ''}}
                    <span v-if="order.dispatchList[0].isSelfOperation===1" class="selfFlag">自</span>
              </p></li>
          <li><p>司机：{{order.dispatchList[0].driverName}}{{order.dispatchList[0].driverPhone ? `·${order.dispatchList[0].driverPhone}` : ''}}
                    <span v-if="order.dispatchList[0].driverIsSelfOperation===1" class="selfFlag">自</span></p></li>
        </ul>
        <ul v-if="order.dispatchList.length > 1">
        <li><p>车辆：--</p></li>
        <li><p>司机：--<a style="float: right;" @click="seeDetail(order.dispatchList)">已指派{{order.dispatchList.length}}辆车</a></p></li>
        </ul>
      </div>
      <div v-if="order.selected" class="dispath_button"><a-button type="primary" @click="gotoOrderDetail(order.orderTruckId)">详情</a-button></div>
    </div>

    <a-modal :visible="visible" title="已指派车辆" @cancel="cancelSee" width="700px" :footer="null">
      <a-table :columns="columnsLocal" :data-source="detailData" rowKey="tractorId" :pagination="false">
        <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import {OrderOptions, SelfOperationOptions} from '../options'

export default {
  name: 'left-order-items',
  props: {
    source: {
      type: Array,
      default () {
        return []
      }
    },
    selectId: Number
  },
  data () {
    const columnsLocal = [
      {
        title: '序号',
        width: 60,
        customRender: (text, record, index) => {
          if (record.isSelect === 1) {
            return <div>{index + 1}<span class='redMsg'>当前指派</span></div>
          }
          return index + 1
        }
      },
      {
        title: '车辆',
        dataIndex: 'tractorNumber',
        customRender: (text, record, index) => {
          if (record.trailerNumber) {
            return `${text}·${record.trailerNumber}`
          }
          return text
        }
      },
      {
        title: '司机姓名',
        dataIndex: 'driverName'
      },
      {
        title: '手机号码',
        dataIndex: 'driverPhone'
      },
      {
        title: '类型',
        width: 70,
        dataIndex: 'isSelfOperation',
        customRender: (text) => {
          if (text === 1) {
            return '自营'
          } else if (text === 0) {
            return '外派'
          }
        }
      }
    ]

    return {
      OrderOptions,
      SelfOperationOptions,
      items: this.createItems(),
      detailData: [],
      columnsLocal,
      visible: false
    }
  },
  methods: {
    orderTypeStr (key) {
      const t = this.OrderOptions.filter(v => v.key === key)[0]
      if (t) return t.title
      return '--'
    },
    gotoOrderDetail (orderTruckId) {
      window.open(`/landCenter/orderDispatch/${orderTruckId}`, '_blank')
    },
    createItems () {
      return this.source.map(order => {
        order['selected'] = order.orderTruckId === this.selectId
        return order
      })
    },
    chooseItem (index) {
      this.items = this.items.map(order => {
        order['selected'] = false
        return order
      })
      this.items[index].selected = true
      this.$emit('click', this.items[index])
    },
    seeDetail (detailData) {
      this.detailData = detailData
      this.visible = true
    },
    cancelSee () {
      this.visible = false
    }
  },
  mounted () {
  },
  watch: {
    source () {
      this.items = this.createItems()
    }
  }

}
</script>

<style lang="less" scoped>
.selfFlag {
  display: inline-block;
  border: 1px solid #1890FF;
  color: #1890FF;
  line-height: 12px;
  font-size: 12px;
  padding: 0 3px;
  margin-left: 8px;
  border-radius: 4px;
}
</style>
